<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=\, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>recharge</title>
  <link rel="stylesheet" href="__CSS__/ming_common.css">
  <link rel="stylesheet" href="__CSS__/ming.css">
  <script src="__JS__/ios-web-app.js"></script>
</head>
<style>
    .send_sure{
        background: #ED1C24!important;
    }
    .detail_footer img{
        padding:.1rem;
        padding-top: .1rem;
    }
    .detail_footer p{
        display: flex;
        align-items:flex-start;
    }
</style>
<body style="padding-top: 38px">
  <header class="header" style="display: flex;justify-content: space-between">
      <div style="display: flex;justify-content: flex-start;align-items: center">
          <a href='{:U("Index/index")}'><img src="__IMG__/hd/backr.png" style="width: .3rem"
                                             alt=""></a>
          <p style="padding-left:.2rem;">24-hour service</p>
      </div>

    <span>wgb.vip@outlook.com</span>
  </header>
  <section style=" background: #fff;padding-top:.2rem">

     <div>
         <div class="recharge_b" style="border-bottom: 1px solid #F1F3F4;padding:.1rem .2rem">
             <h1>Recharge</h1>
             <img src="__IMG__/hd/messager.png" alt="">
         </div>
         <div>
<!--             <p style="padding:.2rem;color:#A9A9A9;">币种:USDT_ERC20</p>-->
             <p style="height: .5rem;line-height: .5rem;padding: .1rem .2rem;display: flex;justify-content: space-between">USDT:&nbsp;&nbsp;
                 <input type="text" style="width: 70%;height: 100%;" id="amount" placeholder="recharge amount" onkeyup="this.value= this.value.match(/\d+(\.\d{0,10})?/) ? this.value.match(/\d+(\.\d{0,10})?/)[0] : ''">
                 <button style="padding: .1rem .2rem;background: red;color: white;border-radius: .1rem" id="charge">confirm</button>
             </p>


         </div>
     </div>

    <div >
        <p style="background: rgba(128,128,128,0.05);padding:.1rem .2rem;color: #a9a9a9">
            <img src="__IMG__/ex/circleh.png" style="width: .1rem" alt="" />
            Contact customer service to get the charging address
        </p>
        <section class="wechat_box">
            <volist name="chat_list" id="vo">
                <if condition="$vo.person eq 'member'">
                    <div class="reply_box">
                        <div>{$vo.content}</div>
                        <img src="__IMG__/hd/userc.png"  class="headuser" alt="">
                    </div>

                    <else />
                    <div class="send_box">
                        <img src="__IMG__/hd/vuser.png" class="headuser" alt="">
                        <div>{$vo.content}</div>
                    </div>
                </if>
            </volist>
<!--            <div class="send_box">-->
<!--                <img src="__IMG__/hd/vuser.png" class="headuser" alt="">-->
<!--                <div>请您提供一下充币地址请您提供一下充币地址请您提供一下充币地址请您提供一下充币地址请您提供一下充币地址请您提供一下充币地址</div>-->
<!--            </div>-->

<!--            <div class="reply_box">-->
<!--                <div>请您提供一下充币地址请您提供一下充币地址请您提供一下充币地址请您提供一下充币地址请您提供一下充币地址</div>-->
<!--                <img src="__IMG__/hd/userc.png"  class="headuser" alt="">-->
<!--            </div>-->

        </section>


      <section class="prompt" style="">

          <div class="detail_footer" style="margin-top:.2rem;padding:0 .1rem">
              <p style="padding-top:0.2rem;">
                  <img src="__IMG__/ex/circleh.png" style="width: .1rem" alt="" />
                  <span style="color:#9A9A9A">Why not recharge erc20_ Usdt assets, otherwise the assets will not be recovered.</span>
              </p>
              <p style="padding-top:0.2rem">
                  <img src="__IMG__/ex/circleh.png" style="width: .1rem" alt="" />
                  <span style="color:#9A9A9A">After recharging, you need the confirmation of the whole network node. After 12 network confirmations, you can get the money</span>
              </p>
              <p style="padding-top:0.2rem">
                  <img src="__IMG__/ex/circleh.png" style="width: .1rem" alt="" />
                  <span style="color:#9A9A9A">Minimum recharge amount: 1000usdt, recharge less than the minimum amount will not be recorded and cannot be returned</span>
              </p>

              <p style="padding-top:0.2rem">
                  <img src="__IMG__/ex/circleh.png" style="width: .1rem" alt="" />
                  <span style="color:#9A9A9A">Please make sure the computer and browser are safe to prevent information from being changed or leaked</span>
              </p>
          </div>
<!--        <ul>-->
<!--            <li>请勿充值任何ERC20_USDT资产,否则资产无法找回</li>-->
<!--            <li>请您充值后,需要整个网络节点的确定,12次网络确认后到账,12次网络确认后可提币</li>-->
<!--            <li>最小充值金额,1USDT,小于最小金额的充值将不会上账且无法退回</li>-->
<!--            <li>请务必确认电脑及浏览器安全,防止信息被改或泄露</li>-->
<!--        </ul>-->
      </section>


    </div>

      <div class="footer_input">
          <div class="input_box">
              <input type="text" placeholder="Enter here..." id="send_input" style="width: 100%">
<!--              <img src="__IMG__/hd/picr.png" alt="" style="width: .5rem">-->
          </div>

          <div>
              <button id="send_btn">Send</button>
          </div>
      </div>
  </section>
    <style>
        html{
            background: #F1F3f4;
        }
        .footer_input button{
            color: #fff;
            border-radius: 6px;
            padding: .2rem .3rem;
            margin-left: .2rem;
            background: #A9A9A9;
        }
        .footer_input{
            position: fixed;
            bottom: 0;
            height:.7rem;
            background: #fff;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            padding: .2rem;
        }
        .footer_input .input_box{
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: #F1F3F4;
            padding: .2rem;
            width: 70%;
        }
        .footer_input .input_box input{
            background: #F1F3F4;
        }
        .recharge_b{
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 .2rem;
            background: #fff;
        }
        ul li{
            list-style: inside;
            padding: .1rem  .2rem;
            color: #a9a9a9;
        }
        .recharge_b h1{
            font-size:.5rem;
        }
        .recharge_b img{
            width: .5rem;
        }
        .wechat_box{
            border-top: 5px solid #F1F3F4;
            padding: .2rem;
            background: #fff;
            height: 3rem;
            overflow-y: auto;
        }
        .wechat_box .headuser{
            width: .6rem;
            padding: .1rem;
        }
        .send_box,.reply_box{
            display: flex;
            align-items:flex-start;
            margin: .1rem 0;
        }
        .send_box>div,.reply_box>div{
            padding-top: .24rem;
        }
        .send_box>div{
            padding-right: .7rem;
        }
        .reply_box>div{
            padding-left: .7rem;
        }
        .send_box{
            justify-content: flex-start;
        }
        .reply_box{
            justify-content: flex-end;
        }
      .zhuanzhang_choose select{
        width: 100%;
        font-size: .3rem;
      }
      .zhuanzhang_input input{
        border-bottom: none;
        width: 60%;
      }

      input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
        color: #a9a9a9;
      }
        .header{
            justify-content: left;
        }
    </style>

  <!-- 引入js -->
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $(".wechat_box").animate({
                scrollTop: $('.wechat_box').prop("scrollHeight")
            }, 1000);
            $("#send_input").bind('input propertychange', function() {
                if($("#send_input").val() !=''){
                    $('#send_btn').addClass('send_sure')
                }else{
                    $('#send_btn').removeClass('send_sure')
                }
            })
            
            $(document).on('click','.send_sure',function () {
                var content = $("#send_input").val()
                if (content == ''){
                    alert('input content')
                    return false
                }
                $.ajax({
                    type:"post",
                    dataType:"json",
                    data:{content:content},
                    url:"{:U('reply')}",
                    success:function (data) {
                        if (data.code > 0){
                            var str = `<div class="reply_box">
                <div>`+content+`</div>
                <img src="__IMG__/hd/userc.png"  class="headuser" alt="">

            </div>`;
                            $(".wechat_box").append(str)
                            $("#send_input").val('')
                            $(".wechat_box").animate({
                                scrollTop: $('.wechat_box').prop("scrollHeight")
                            }, 1000);
                            return  false
                        } else {
                            alert(data.msg)
                            return false
                        }
                    }
                })



            })
            
            //充值
            $("#charge").click(function () {
                var amount = $("#amount").val()
                if (amount == '' || amount <= 0 || isNaN(amount)){
                    alert('请输入充值金额')
                    return false
                }
                var c = $(this)
                if (confirm('Please make sure that it has been recharged to the charging address provided by customer service')){
                    c.attr('disabled',true).css('pointer-events','none')
                    $.ajax({
                        type:"post",
                        dataType:"json",
                        data:{amount:amount},
                        url:"{:U('charge_apply')}",
                        success:function (data) {
                            if (data.code > 0){
                                alert(data.msg)
                                window.location.reload()
                            } else {
                                alert(data.msg)
                                c.attr('disabled',false).css('pointer-events','auto')
                            }
                        }
                    })
                } 
            })
        })

    </script>
</body>

</html>